<template>
     <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <div v-for="item in productData" :key="item">
        <van-card
        :num="item.id"
        :price="item.price"
        :desc="item.name"
        :title="item.name"
        :thumb="item.img"
        @click="plist(item.id)"
    />
        <hr>
    </div>
    </van-list>

   
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { ProductApi } from '@/api';
import { useRoute, useRouter } from 'vue-router';
const router=useRouter()
const route=useRoute()

const loading = ref(false);
const finished = ref(false);
const productData=ref([] as any[])
const pageData = reactive({
    pageSize: 5,
    pageNum: 1,
    categoryId:0
})
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        CallProductApi()
        // 加载状态结束
        loading.value = false;
    })
};
const CallProductApi = () => { 
    //待用时打开loading
    loading.value=true

    ProductApi.select.call({ categoryId:pageData.categoryId, pageNum: pageData.pageNum, pageSize: pageData.pageSize })
        .then((res: any) => { 
            // console.log(res);
            //加载完成或者状态结束
            loading.value = false
            if (res.items.length == 0) { 
                finished.value=true
            }else{
            productData.value = productData.value.concat(res.items)
                pageData.pageNum = pageData.pageNum + 1
            }
    })
}
onMounted(() => { 
   pageData.categoryId=Number(route.query.categoryId)
})
const plist = (id:any) => { 
    router.push({ name: 'moveShopDetail', query: {id:id} })
}

const onClickLeft = () => history.back();
</script>
<style scoped>

</style>